import React from "react";
import ReactECharts from "echarts-for-react";

import { EChartsOption, graphic } from "echarts";

import {
  CockpitChartBaseProps,
  echartsCockpitTheme,
  legendCommonConfig,
  lineChartGridCommonConfig,
  lineChartTooltipCommonConfig,
} from "../helps";
import CustomChartTooltip, { ToolTipFonts } from "../customChartTooltip";
import { createRoot } from "react-dom/client";

const tooltipRootDom = document.createElement("div");

const tooltipRoot = createRoot(tooltipRootDom);

export const getCategoryTradeRankBarChartOption = ({
  unitName,
  dataSource,
}: CategoryTradeRankBarChartProps): EChartsOption => {
  return {
    color: ["#49A661", "#75ACF6"],
    legend: {
      ...legendCommonConfig,
      icon: "rect",
      data: ["采购", "销售"],
    },
    tooltip: {
      ...lineChartTooltipCommonConfig,
      formatter: (params: any) => {
        const [ds1 = {}, ds2 = {}] = params;
        tooltipRoot.render(
          <CustomChartTooltip>
            <ToolTipFonts>{ds1.name}</ToolTipFonts>
            <ToolTipFonts>
              <span
                dangerouslySetInnerHTML={{
                  __html: ds1.marker || "",
                }}
              />
              采购额：{ds1.value}
              {unitName}
            </ToolTipFonts>
            <ToolTipFonts>
              <span
                dangerouslySetInnerHTML={{
                  __html: ds2.marker || "",
                }}
              />
              销售额：{ds2.value}
              {unitName}
            </ToolTipFonts>
          </CustomChartTooltip>
        );
        return tooltipRootDom;
      },
    },

    grid: {
      ...lineChartGridCommonConfig,
      containLabel: true,
    },
    xAxis: [
      {
        type: "value",

        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#AFBFE0",
          opacity: 0.8,
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "#899DBF",
            opacity: 0.28,
          },
        },
      },
    ],
    yAxis: [
      {
        name: "单位：" + unitName,
        type: "category",
        axisLabel: {
          color: "#AFBFE0",
          opacity: 0.8,
        },

        axisLine: {
          lineStyle: {
            color: "#899DBF",
            opacity: 0.29,
            type: "solid",
          },
        },
        axisTick: {
          show: false,
        },
        data: dataSource?.map((d) => d.name || ""),
      },
    ],
    series: [
      {
        barWidth: 8,
        name: "采购",
        type: "bar",
        label: {
          show: false,
          position: "inside",
        },

        data: dataSource?.map((d) => d.purAmount || 0),
        itemStyle: {
          borderWidth: 0,
          opacity: 0.8,
          color: new graphic.LinearGradient(0, 0, 1, 1, [
            {
              offset: 1,
              color: "#8CDCB8",
            },
            {
              offset: 0,
              color: "#387045",
            },
          ]),
        },
      },
      {
        barWidth: 8,
        name: "销售",
        type: "bar",
        label: {
          show: false,
          position: "inside",
        },

        data: dataSource?.map((d) => d.supAmount || 0),
        itemStyle: {
          borderWidth: 0,
          opacity: 0.8,
          color: new graphic.LinearGradient(0, 0, 1, 1, [
            {
              offset: 1,
              color: "#75ACF6",
            },
            {
              offset: 0,
              color: "#2138A6",
            },
          ]),
        },
      },
    ],
  };
};

export interface CategoryTradeRankBarChartProps extends CockpitChartBaseProps {
  unitName?: string;
}
const CategoryTradeRankBarChart = ({
  reactEChartsProps,
  unitName = "万元",
  dataSource = [],
}: CategoryTradeRankBarChartProps) => {
  return (
    <ReactECharts
      theme={echartsCockpitTheme}
      option={getCategoryTradeRankBarChartOption({
        unitName,
        dataSource,
      })}
      {...reactEChartsProps}
    />
  );
};

export default CategoryTradeRankBarChart;
